<!-- 登录 -->
<template>
  <div class="login">
    <van-nav-bar title="登录" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="login_banner">
      <div class="login_head">CCT-你的校园好帮手</div>
      <van-cell-group>
        <van-field v-model="account" clearable label="用户名" icon="question-o" placeholder="请输入用户名" />
        <van-field
          v-model="password"
          clearable
          label="密码"
          icon="question-o"
          type="password"
          placeholder="请输入密码"
        />
        <div class="login_div_button">
          <van-button class="login_button" type="info" size="small" @click="judge()">登 录</van-button>
          <van-button class="login_button" type="default" size="small" to="./register">注 册</van-button>
        </div>
      </van-cell-group>
    </div>
    <div class="login_footer">Copyright · ©成都东软学院</div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Lazyload } from 'vant'
import { login } from 'api/user.js'
import axios from 'axios'
Vue.use(axios)
Vue.use(Lazyload)
export default {
  data() {
    return {
      account: '',
      password: ''
    }
  },
  components: {},
  methods: {
    Change(v) {
      console.log('tab value:', v)
    },
    judge() {
      if (this.username !== '' && this.password !== '') {
        // this.$router.replace('/home')
        const data = {
          account: '',
          password: ''
        }
        Object.keys(data).forEach(key => {
          data[key] = this[key]
        })
        login(data)
          .then(result => {
            if (result.msg === 100) {
              this.$toast(result.data)
            } else if (result.code === 200) {
              sessionStorage.setItem('token', result.data.token)
              sessionStorage.setItem('account', this.account)
              var token = result.data.token
              axios
                .get('http://39.96.36.251/api/user/selectuserbytoken?token=' + token)
                .then(function (res) {
                  sessionStorage.setItem('user_id', res.data.data[0].id)
                })
                .catch(function (err) {
                  console.log(err)
                })
              this.$router.replace('/home')
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    onClickLeft() {
      this.$toast('返回')
      this.$router.replace('/')
    }
  }
}
</script>

<style scoped>
.login {
  width: calc(100vw);
  height: calc(100vh);
  background: linear-gradient(#ed8989, #5b62b5);
}
.login_head {
  /* background-color: rgba(85, 161, 233, 0.671); */
  box-sizing: border-box;
  padding-left: 20.000004px;
  height: 60px;
  width: 90%;
  line-height: 60px;
  font-size: 24px;
  color: white;
  /* background: rgba(255, 255, 255, 0.281); */
  text-align: center;
}
.login_footer {
  color: white;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: black;
  height: 60px;
  line-height: 60px;
  font-size: 12px;
  width: 100%;
  text-align: center;
}
.login_banner {
  background: transparent;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  height: 300px;
}
.login_div_button {
  padding: 21px;
  display: flex;
  justify-content: space-around;
}
.login_button {
  padding: 0 21px;
}
</style>
